<template>
	<view class="p-10">
		<view class="flex flex-row flex-wrap rounded-lg bg-white" style="box-shadow: 0 0 5px 0px rgba(0,0,0,0.3)">
			<view class="w-full px-15 py-15 text-14" style="color: #5E5E5E; ">
				<!-- <view class="text-bold text-18  pb-10" style="border-bottom: 6rpx solid #F69D04; ">
					<input class="w-full" type="text" placeholder="填写派单名称" v-model="name" placeholder-style="color:#B8B8B8" ></input>
				</view> -->
				<view class="  flex flex-row align-items-center">
					<text class="">货物种类：</text>
					<view class="flex-1">
						<picker @change="transportTypeChange" :value="transport_type_index" :range="transport_type_list">
							<view class="flex flex-row align-items-center text-right">
								<text class="text-black flex-1">{{transport_type_list.length>0 ? transport_type_list[transport_type_index] : ''}}</text>
								<view class="ml-2 text-0"><image src="/static/arrow-b.png" style="width: 30rpx; height: 30rpx;"></image></view>
							</view>
						</picker>
					</view>
				</view>
				<view v-if="transport_type == '其他'" class="flex flex-row align-items-center rounded-xs mt-3 px-10" style="border: 1px solid #bbb; height: 70rpx;">
					<input class="text-14 text-right flex-1 text-black" type="text" placeholder="点击输入货物种类"   v-model="transport_type_other"></input>
				</view>
				
				<view class=" flex flex-row align-items-center" :class="transport_type != '其他' ? 'pt-12' : 'pt-8'">
					<text class="">货运场景：</text>
					<view class="flex-1">
						<picker @change="transportSceneChange" :value="transport_scene_index" :range="transport_scene_list">
							<view class="flex flex-row align-items-center text-right">
								<text class="text-black flex-1">{{transport_scene_list.length>0 ? transport_scene_list[transport_scene_index] : ''}}</text>
								<view class="ml-2 text-0"><image src="/static/arrow-b.png" style="width: 30rpx; height: 30rpx;"></image></view>
							</view>
						</picker>
					</view>
				</view> 
				<view v-if="transport_scene == '其他'" class="flex flex-row align-items-center rounded-xs mt-3 px-10" style="border: 1px solid #bbb; height: 70rpx;">
					<input class="text-14 text-right flex-1 text-black" type="text" placeholder="点击输入货运场景"   v-model="transport_scene_other"></input>
				</view>
				<view class="  flex flex-row align-items-center" :class="transport_scene != '其他' ? 'pt-12' : 'pt-8'">
					<text class="">运输距离：</text>
					<view class="flex-1">
						<picker class="" @change="transportDistanceChange" :value="transport_distance_index" :range="transport_distance_list">
							<view class="flex flex-row align-items-center text-right">
								<text class="text-black flex-1">{{transport_distance_list.length>0 ? transport_distance_list[transport_distance_index] : ''}}</text>
								<view class="ml-2 text-0"><image src="/static/arrow-b.png" style="width: 30rpx; height: 30rpx;"></image></view>
							</view>
						</picker>
					</view>
				</view>
				<view class=" pt-12 flex flex-row align-items-center ">
					<text class="">预估重量：</text>
					<input class="text-14 text-right flex-1 text-black" type="number" placeholder="点击输入重量大小"   v-model="weight"></input>
					<view class="text-black mx-4">吨</view>
				</view>
			</view>
		</view>
		<view class="flex flex-row flex-wrap rounded-lg bg-white mt-10" style="box-shadow: 0 0 5px 0px rgba(0,0,0,0.3)">
			<view class="w-full px-15 py-15 text-14 mr-4" style="color: #5E5E5E; ">
				<view class=" flex flex-row align-items-center">
					<text class="">上门时间：</text>
					<view class="flex-1">
						<uni-datetime-picker  v-model="exec_at" hide-second>
							<view v-if='exec_at' class="text-black text-right">{{exec_at}}</view>
							<view v-else class="text-right">点击选择日期时间</view>
						</uni-datetime-picker>
					</view>
				</view>
				<!-- <view class=" pt-12  flex flex-row align-items-center">
					<text class="flex-1">结束时间：</text>
					<uni-datetime-picker v-model="end_at" hide-second>
						<view v-if='end_at' class="text-black text-right">{{end_at}}</view>
						<view v-else class="text-right">点击选择日期时间</view>
					</uni-datetime-picker>
				</view> -->
			</view>
		</view>
		<view class="flex flex-row flex-wrap rounded-lg bg-white mt-10" style="box-shadow: 0 0 5px 0px rgba(0,0,0,0.3)">
			<view class="w-full px-15 py-10 text-14 mr-4" style="color: #5E5E5E; padding-right: 15rpx;">
				<view class="flex flex-row ">
					<text class="pt-5" style="flex-shrink: 0;">任务地址：</text>
					<view class="pt-5 flex-1" style="overflow: hidden; " @tap="chooseLocation">
						<!-- <input class="flex-1 text-14 text-right text-black" type="text" placeholder="点击填写详细地址"  v-model="full_address"></input> -->
						<view class="text-14 text-right text-black ellipsis" style="width: 470rpx;">{{full_address}}</view>
					</view>
					<view class="p-5 text-0"  @tap="chooseLocation">
						<image class="" style="width: 38rpx; height: 38rpx;" src="/static/address-orange.png"></image>
					</view>
				</view>
				<!-- <view class=" pt-12 flex flex-row ">
					<text class="" style="flex-shrink: 0;">送达地址：</text>
					<view class="flex-1 " style="overflow: hidden;">
						<view class="flex flex-row align-items-center">
							<input class="flex-1 text-14 text-right text-black" type="text" placeholder="点击填写详细地址" v-model="full_address2"></input>
							<view class="p-5" @tap="chooseLocation2">
								<image class="ml-4" style="width: 38rpx; height: 38rpx;" src="/static/address-blue.png" ></image>
							</view>
						</view>
					</view>
				</view> -->
			</view>
		</view>
		<!-- <view class="flex flex-row flex-wrap rounded-lg bg-white mt-10" style="box-shadow: 0 0 5px 0px rgba(0,0,0,0.3)">
			<view class="w-full px-15 py-15 text-14 mr-4" style="color: #5E5E5E; ">
				<view class=" ">
					<view class=" pb-10">订单描述：</view>
					<view style="line-height: 1.25rem;">
						<textarea class="text-14 w-full text-black" style="height: 300rpx;" v-model="desc" placeholder="点击编辑订单描述" maxlength="300"></textarea>
					</view>
				</view>
			</view>
		</view> -->
		<view class="flex flex-row flex-wrap rounded-lg bg-white mt-10" style="box-shadow: 0 0 5px 0px rgba(0,0,0,0.3)">
			<view class="w-full px-15 py-15 text-14 mr-4" style="color: #5E5E5E; ">
				<view class="">  
					<view class="pb-10">订单要求：</view>
					<view style="line-height: 1.25rem;">
						<textarea class="text-14 w-full text-black" style="min-height: 400rpx;" v-model="require" placeholder="点击编辑订单要求" maxlength="2000"></textarea>
					</view>
				</view>
			</view>
		</view>
		<view class="flex flex-row flex-wrap rounded-lg bg-white mt-10" style="box-shadow: 0 0 5px 0px rgba(0,0,0,0.3)">
			<view class="w-full px-15 py-15 text-14 mr-4" style="color: #5E5E5E; ">
				<view class="flex flex-row align-items-center">
					<text class="">预估价格：</text>
					<!-- <input class="flex-1 text-14 text-right text-bold" type="text" placeholder="点击填写预估价格" placeholder-style="font-weight:normal;"  v-model="money" style="color: #F69D04;"></input> -->
					<view class="flex-1 text-14 text-right text-bold" style="color: #F69D04;">{{money}}</view>
					<text class="text-bold ml-4" style="color: #F69D04;">元</text>
				</view>
			</view>
		</view>
		<!-- <view class="flex flex-row flex-wrap rounded-lg bg-white mt-10" style="box-shadow: 0 0 5px 0px rgba(0,0,0,0.3)">
			<view class="w-full px-15 py-15 text-14 mr-4" style="color: #5E5E5E; ">
				<view class="   flex flex-row align-items-center">
					<text class=" flex-shrink-0">审批文件：</text>
					<text v-if="file_name" class="flex-1 text-14 ellipsis text-right text-black"  @tap="uploadFile">{{file_name}}</text>
					<text v-else class="flex-1 text-14 text-bold text-right" style="color: #1391DA" @tap="uploadFile">点击上传审批文件</text>
				</view>
			</view>
		</view> -->
		
		<view class="text-center pb-10 pt-30" style="">
			<view v-if="!id || form_type=='copy'" class="text-bold text-center text-white rounded-lg" style="width: 560rpx; height:100rpx; line-height: 100rpx;font-size: 40rpx;background-color: #3E57E8;letter-spacing: 10rpx;margin: auto;box-shadow: 0 0 5px 0px rgba(0,0,0,0.3)" @tap="addTask">订单发布</view> 
			<view v-else class="text-bold text-center text-white rounded-lg" style="width: 560rpx; height:100rpx; line-height: 100rpx;font-size: 40rpx;background-color: #3E57E8;letter-spacing: 10rpx;margin: auto;box-shadow: 0 0 5px 0px rgba(0,0,0,0.3)" @tap="editTask">订单发布</view> 
		</view>
	</view>
</template>

<script>
	import { mapState, mapMutations } from 'vuex'
	import request from '/utils/request.js';
	import {getDateTime, uploadFile} from '/utils/util.js'
	import {checkAndOpenScope} from '/utils/util.js';
	export default {
		data() {
			return {
				form_type: '', // copy=复制编辑
				id: '',
				transport_type_list: [],
				transport_type_index: 0,
				transport_type: '',
				transport_scene_list: [],
				transport_scene_index: 0,
				transport_scene: '',
				transport_distance_list: [],
				transport_distance_index: 0,
				transport_distance: '',
				weight: '100',
				exec_at: getDateTime(new Date(), true),
				name: '',
				desc: '',
				require: '',
				
				// money: '999',
				province: '',
				city: '',
				area: '',
				address: '',
				file_name: '',
				file_url: '',
				lat: '',
				lng: '',
				
				lat2: '',
				lng2: '',
				address2: '',
				province2: '',
				city2: '',
				area2: '',
				end_at: '',
				
				full_address: '',
				full_address2: '',
				transport_type_other: '',
				transport_scene_other: '',
				
				transport_distance_list_obj: {}
			}
		},
		computed: {
			...mapState(['mapKey']),
			money: function(){
				// 每吨的价格，D是距离，D
				// D<300时，150元每吨
				// D>=300时，200 *（1+（（D-300）/300）*80%）
				let distance = this.transport_distance_list_obj[this.transport_distance] ? Number(this.transport_distance_list_obj[this.transport_distance].distance) : 0;
				let money = 0;
				if(distance < 300){
					money = 150 * Number(this.weight);
				}else{
					let per = 200 * (1 + (distance - 300) / 300 * 0.8);
					per = parseFloat(per.toFixed(2));
					money = per * Number(this.weight);
				}
				money = money > 999 ? money : 999;
				return money.toFixed(2); 
			}
		},
		onLoad(options) {
			var that = this;
			// 复制编辑
			if(options.id && options.type == 'copy'){
				this.id = options.id;
				this.form_type = options.type;
				request.post('/transport/taskDetail', {
					id: options.id
				}).then(res=>{
					this.exec_at = res.exec_at;
					this.name = res.name;
					this.desc = res.desc;
					this.require = res.require;
					this.money = res.money;
					this.province = res.province;
					this.city = res.city;
					this.area = res.area;
					this.address = res.address;
					this.file_name = res.file_name;
					this.file_url = res.file;
					this.lat = res.lat;
					this.lng = res.lng;
					
					this.province2 = res.province2;
					this.city2 = res.city2;
					this.area2 = res.area2;
					this.address2 = res.address2;
					this.lat2 = res.lat2;
					this.lng2 = res.lng2;
					this.weight = res.weight;
					this.end_at = res.end_at;
					this.transport_type = res.transport_type;
					this.transport_scene = res.transport_scene;
					this.transport_distance = res.transport_distance;
					
					this.full_address = this.getFullAddress();
					this.full_address2 = this.getFullAddress2();
				})
			}else if(options.id){
				this.id = options.id;
				request.post('/merchant/taskDetail', {
					id: options.id
				}).then(res=>{
					this.id = res.id;
					this.exec_at = res.exec_at;
					this.name = res.name;
					this.desc = res.desc;
					this.require = res.require;
					this.money = res.money;
					this.province = res.province;
					this.city = res.city;
					this.area = res.area;
					this.address = res.address;
					this.file_name = res.file_name;
					this.file_url = res.file;
					this.lat = res.lat;
					this.lng = res.lng;
					
					this.province2 = res.province2;
					this.city2 = res.city2;
					this.area2 = res.area2;
					this.address2 = res.address2;
					this.lat2 = res.lat2;
					this.lng2 = res.lng2;
					this.weight = res.weight;
					this.end_at = res.end_at;
					this.transport_type = res.transport_type;
					this.transport_scene = res.transport_scene;
					this.transport_distance = res.transport_distance;
					
					this.full_address = this.getFullAddress();
					this.full_address2 = this.getFullAddress2();
				})
			}else if(uni.getStorageSync('form_position')){
				// 如果携带经纬度，赋值经纬度信息
				let form_position = uni.getStorageSync('form_position');
				uni.removeStorageSync('form_position');
				if(form_position){
					if(form_position.sp){
						that.lat = form_position.sp.latitude;
						that.lng = form_position.sp.longitude;
						that.address = form_position.sp.address;
						that.province = form_position.sp.province;
						that.city = form_position.sp.city;
						that.area = form_position.sp.area;
						that.transport_type = form_position.sp.transport_type;
						that.transport_type_index = form_position.sp.transport_type_index;
						that.full_address = that.getFullAddress();
						
					}
					if(form_position.ep){
						that.lat2 = form_position.ep.latitude;
						that.lng2 = form_position.ep.longitude;
						that.address2 = form_position.ep.address;
						that.province2 = form_position.ep.province;
						that.city2 = form_position.ep.city;
						that.area2 = form_position.ep.area;
						that.full_address2 = that.getFullAddress2();
					}
				}
			} else if(uni.getStorageSync('cur_position')) {
				// 如果携带经纬度，赋值经纬度信息
				let cur_position = uni.getStorageSync('cur_position');
				if(cur_position){
					that.lat = cur_position.latitude;
					that.lng = cur_position.longitude;
					that.address = cur_position.address;
					that.province = cur_position.province;
					that.city = cur_position.city;
					that.area = cur_position.area;
					that.full_address = that.getFullAddress();
				}
			}
			
			// 获取货运配置数据
			request.post('transport/config').then(res=>{
				this.transport_distance_list = res.transport_distance_list;
				this.transport_scene_list = res.transport_scene_list;
				this.transport_type_list = res.transport_type_list;
				if(this.transport_type==''){
					this.transport_type = this.transport_type_list[this.transport_type_index];	
				}
				if(this.transport_scene==''){
					this.transport_scene = this.transport_scene_list[this.transport_scene_index];
				}
				if(this.transport_distance==''){
					this.transport_distance = this.transport_distance_list[this.transport_distance_index];
				}
				
				this.transport_distance_list_obj = res.transport_distance_list_obj;
			})
		},
		onShow() {
			
		},
		onReachBottom() {
			
		},
		methods: {
			getFullAddress: function(){
				return this.province + this.city + this.area + this.address
			},
			getFullAddress2: function(){
				return this.province2 + this.city2 + this.area2 + this.address2
			},
			transportTypeChange(e){
				this.transport_type_index = e.detail.value
				this.transport_type = this.transport_type_list[this.transport_type_index]
			},
			transportSceneChange(e){
				this.transport_scene_index = e.detail.value
				this.transport_scene = this.transport_scene_list[this.transport_scene_index]
			},
			transportDistanceChange(e){
				this.transport_distance_index = e.detail.value
				this.transport_distance = this.transport_distance_list[this.transport_distance_index]
			},
			
			// 上传文件
			uploadFile(){
				uploadFile({
					count: 1
				}).then(res=>{
					console.log(res)
					let file = res[0];
					this.file_name = file.filename
					this.file_url = file.url
				})
			},
			// 新增订单任务
			addTask(){
				request.post('transport/addTask', {
					exec_at: this.exec_at,
					name: this.name,
					desc: this.desc,
					require: this.require,
					money: this.money,
					province: this.province,
					city: this.city,
					area: this.area,
					address: this.address,
					file_name: this.file_name,
					file: this.file_url,
					lat: this.lat,
					lng: this.lng,
					
					province2: this.province2,
					city2: this.city2,
					area2: this.area2,
					address2: this.address2,
					lat2: this.lat2,
					lng2: this.lng2,
					end_at: this.end_at,
					weight: this.weight,
					transport_type: this.transport_type,
					transport_scene: this.transport_scene,
					transport_distance: this.transport_distance,
					
					transport_type_other: this.transport_type_other,
					transport_scene_other: this.transport_scene_other,
				}).then(res=>{
					uni.showToast({
						title: '订单提交成功'
					})
					this.clearData();
					setTimeout(()=>{
						uni.redirectTo({
							'url': '/pages/task/list'
						})
					}, 1000)
				})
			},
			// 修改订单任务
			editTask(){
				request.post('transport/editTask', {
					id: this.id,
					exec_at: this.exec_at,
					name: this.name,
					desc: this.desc,
					require: this.require,
					money: this.money,
					province: this.province,
					city: this.city,
					area: this.area,
					address: this.address,
					file_name: this.file_name,
					file: this.file_url,
					lat: this.lat,
					lng: this.lng,
					
					province2: this.province2,
					city2: this.city2,
					area2: this.area2,
					address2: this.address2,
					lat2: this.lat2,
					lng2: this.lng2,
					end_at: this.end_at,
					weight: this.weight,
					transport_type: this.transport_type,
					transport_scene: this.transport_scene,
					transport_distance: this.transport_distance,
					
					is_company: this.userInfo.is_verification ? 1 : 0,
					
					transport_type_other: this.transport_type_other,
					transport_scene_other: this.transport_scene_other,
				}).then(res=>{
					uni.showToast({
						title: '订单提交成功'
					})
					setTimeout(()=>{
						uni.redirectTo({
							'url': '/pages/task/list'
						})
					}, 1000)
				})
			},
			// 清空数据
			clearData(){
				this.exec_at = getDateTime(new Date(), true);
				this.name = '';
				this.desc = '';
				this.require = '';
				this.money = '999';
				// this.province = '';
				// this.city = '';
				// this.area = '';
				// this.address = '';
				this.file_name = '';
				this.file_url = '';
				this.lat = '';
				this.lng = '';
				
				// this.province2 = '';
				// this.city2 = '';
				// this.area2 = '';
				// this.address2 = '';
				// this.lat2 = '';
				// this.lng2 = '';
				this.end_at = '';
				this.weight = '100';
				this.transport_type = this.transport_type_list[0];
				this.transport_scene = this.transport_scene_list[0];
				this.transport_distance = this.transport_distance_list[0];
				
				// this.full_address = '';
				// this.full_address2 = '';
			},
			// 选择地点-起点
			chooseLocation(){
				console.log('选择位置')
				var that = this;
				checkAndOpenScope('scope.userLocation', '需要您授权当前位置信息，是否前往设置页面开启？').then(() => {
					wx.chooseLocation({
						success(res){
							console.log('chooseLocation，success', res)
							that.lat = res.latitude;
							that.lng = res.longitude;
							that.address =  res.name;
							// 经纬度解析成地址
							wx.request({
								url: `https://apis.map.qq.com/ws/geocoder/v1/?key=${that.mapKey}&&location=${that.lat},${that.lng}`,  
								header: {
									'content-type': 'application/json' // 默认值
								},
								success (res) {
									console.log('地址逆解析成功', res.data)
									let data = res.data;
									if(data.status != 0) return;
									let ad_info = data.result.ad_info
									that.province = ad_info.province;
									that.city = ad_info.city;
									that.area = ad_info.district;
									that.full_address = that.getFullAddress()
								}
							})
						},
						fail(err) {
							console.log('chooseLocation，fail', err)
						}
					})
				})
			},
			
			// 选择地点-终点
			chooseLocation2(){
				console.log('选择位置')
				var that = this;
				checkAndOpenScope('scope.userLocation', '需要您授权当前位置信息，是否前往设置页面开启？').then(() => {
					wx.chooseLocation({
						success(res){
							console.log('chooseLocation，success', res)
							that.lat2 = res.latitude;
							that.lng2 = res.longitude;
							that.address2 =  res.name;
							// 经纬度解析成地址
							wx.request({
								url: `https://apis.map.qq.com/ws/geocoder/v1/?key=${that.mapKey}&&location=${that.lat2},${that.lng2}`,  
								header: {
									'content-type': 'application/json' // 默认值
								},
								success (res) {
									console.log('地址逆解析成功', res.data)
									let data = res.data;
									if(data.status != 0) return;
									let ad_info = data.result.ad_info
									that.province2 = ad_info.province;
									that.city2 = ad_info.city;
									that.area2 = ad_info.district;
									that.full_address2 = that.getFullAddress2()
								}
							})
						},
						fail(err) {
							console.log('chooseLocation，fail', err)
						}
					})
				})
			},
		}
	}
</script>

<style lang="scss">
	page{
		background-color: #F7EDE8;
	}
	.bottom-line{
		border-bottom: 1px solid #bbb;
	}
	/* #ifdef MP-WEIXIN */
	.uni-data-tree .input-value{
		display: flex;
		flex-direction: row;
		align-items: center;
		padding: 0 0px;
		padding-right: 5px;
		overflow: hidden;
		height: initial;
		box-sizing: border-box;
		border: none !important;
		border-radius: 0px;
		line-height: 1.25rem !important;
		font-size: 28rpx !important;
		flex-wrap: wrap !important;
		color: #B8B8B8;
	}
	.uni-data-tree .input-value .arrow-area{
		display: none;
	}
	.uni-data-tree .input-value .selected-area{
		font-size: 28rpx !important;
	}
	.uni-data-tree .input-value .selected-item{
		font-size: 28rpx !important;
	}
	/* #endif */
</style>
